<div class="main-box" [ngStyle]="tagData.cssStyle | styleFilter">
  <ng-container *ngIf="tagData.data?.data">
    <div class="title-box" *ngIf="tagData?.data?.data?.titleLeft || tagData?.data?.data?.titleright"
      [ngStyle]="tagData?.data?.data?.titleBoxCssStyle|styleFilter">
      <div [ngStyle]="tagData?.data?.data?.titleInnerBoxCssStyle|styleFilter">
        <span class="title-content" *ngIf="tagData?.data?.data?.titleLeft"
          [ngStyle]="tagData?.data?.data?.titleLeftCssStyle|styleFilter">{{tagData?.data?.data?.titleLeft}}</span>
        <span *ngIf="tagData?.data?.data?.titleLeft && tagData?.data?.data?.titleright"
          [ngStyle]="tagData?.data?.data?.titlerightLineCssStyle|styleFilter" class="title-dividing-line"></span>
        <span class="title-content" *ngIf="tagData?.data?.data?.titleright"
          [ngStyle]="tagData?.data?.data?.titlerightCssStyle|styleFilter">{{tagData?.data?.data?.titleright}}</span>
      </div>
      <span class="margin75" *ngIf="tagData?.data?.data?.topRight"
        appDebounceClick (debounceClick)="openModalByIcon(tagData?.data?.data?.topRight?.link)"
        [ngStyle]="tagData?.data?.data?.topRight?.link?.cssStyle|styleFilter">
        <ng-container *ngIf="tagData?.data?.data?.topRight?.link?.label">
          {{tagData?.data?.data?.topRight?.link?.label}}
        </ng-container>
        <img class="arrowIcon" src="{{tagData?.data?.data?.topRight?.link?.iconUrl}}"
          onerror="this.src='assets/fw/arrow@3x.png'" />
      </span>
    </div>
  </ng-container>
  <div class="content" *ngIf="!tagData.data?.data?.hiddenContentBox"
    appDebounceClick (debounceClick)="goPage(tagData.data?.data?.detailLink?.link)"
    [ngStyle]="tagData?.data?.data?.contentBoxCssStyle|styleFilter">
    <div class="img-bg" *ngIf="tagData.data?.data?.imageUrl">
      <img src="{{tagData.data?.data?.imageUrl}}" [ngStyle]="tagData.data?.data?.imageUrlCssStyle|styleFilter"
        class="avatar" onerror="this.src='assets/img/headtrait.png'">
      <span class="star" *ngIf="tagData.data?.data?.level"
        [ngStyle]="tagData.data?.data?.levelCssStyle | styleFilter">{{tagData.data?.data?.level}}</span>
      <img class="imageUrlPlayIcon" src="{{tagData.data?.data?.imageUrlPlayIcon}}"
        *ngIf="tagData.data?.data?.imageUrlPlayIcon" />
    </div>
    <div class="content-bg" [ngStyle]="tagData.data?.data?.contentCssStyle|styleFilter">
      <div class="name-bg">
        <div class="name-tag">
          <span class="name" *ngIf="tagData.data?.data?.title"
            [ngStyle]="tagData.data?.data?.titleCssStyle | styleFilter">{{tagData.data?.data?.title}}</span>
          <ng-container *ngFor="let item of tagData.data?.data?.tags?.data">
            <span class="newTag" [ngStyle]="item.cssStyle | styleFilter">{{item.label}}</span>
          </ng-container>
        </div>
        <span class="area" [ngStyle]="tagData.data?.data?.areaCssStyle | styleFilter"
          *ngIf="tagData.data?.data?.area">{{tagData.data?.data?.area}}</span>
      </div>
      <p class="tag-bg" *ngIf="tagData.data?.data?.secondRowTags"
        [ngStyle]="tagData.data?.data?.secondRowBoxCssStyle | styleFilter">
        <span class="tag-" *ngFor="let tag of tagData.data?.data?.secondRowTags"
          [ngStyle]="tagData.data?.data?.secondRowTagsCssStyle | styleFilter">{{tag}}</span>
      </p>
      <div class="second-row" *ngIf="tagData.data?.data?.history?.data">
        <ng-container *ngFor="let historyItem of tagData.data?.data?.history?.data;let index=index;">
          <ng-container *ngIf="tagData.data.data.hiddenHistorySpline===undefined">
            <div *ngIf="index>0" class="spLine"></div>
          </ng-container>
          <span class="text" *ngIf="historyItem.label"
            [ngStyle]="historyItem.cssStyle | styleFilter">{{historyItem.label}}</span>
        </ng-container>
      </div>
    </div>
  </div>
  <div *ngIf="tagData.data?.data?.remarksCssStyle" [ngStyle]="tagData.data?.data?.remarksCssStyle | styleFilter">
    <ng-container *ngFor="let item of tagData.data?.data?.remarks?.data">
      <ng-container *ngIf="item.value==='remarksowTags'; else orignalTemplate">
        <div style="display: flex; " [ngStyle]="item.singleBoxCssStyle | styleFilter"><span style="flex-shrink: 0;"
            [ngStyle]="item.labelCssStyle | styleFilter">{{item.label}}</span>
          <div class="markBox" [ngStyle]="tagData.data?.data?.markBoxCssStyle | styleFilter">
            <ng-container *ngFor="let s of tagData.data?.data[item.value]">
              <span [ngStyle]="item.valueCssStyle | styleFilter"
                style="overflow: hidden;display: -webkit-box !important;-webkit-box-orient: vertical;" [innerHTML]="s">
              </span>
            </ng-container>
          </div>
        </div>
      </ng-container>
      <ng-template #orignalTemplate>
        <div class="1" style="display: flex;" [ngStyle]="item.singleBoxCssStyle | styleFilter"><span
            style="flex-shrink: 0;" [ngStyle]="item.labelCssStyle | styleFilter">{{item.label}}</span>

          <ng-container *ngIf="item.value; else multiValueTemplate">
            <span [ngStyle]="item.valueCssStyle | styleFilter"
              style="overflow: hidden;display: -webkit-box !important;-webkit-box-orient: vertical;"
              [innerHTML]="item.value">
            </span>
          </ng-container>
          <ng-template #multiValueTemplate>
            <div class="multipleDiv">
              <ng-container *ngFor="let multiple of item.multipleValue">
                <p [ngStyle]="item.valueCssStyle | styleFilter">
                  {{multiple}}
                </p>
              </ng-container>
            </div>
          </ng-template>

        </div>
      </ng-template>


    </ng-container>
  </div>
</div>